<template>
  <main>
    <!-- 标题 -->
    <div id="topic">
      <text>七日</text>
      <text>🫰 口袋集市 😎</text>
    </div>

    <!-- 描述 -->
    <div id="describe">
      <text id="typed-text"></text><br>
      <text>签到领钱、挂机致富、一句话就能开店</text>
    </div>

    <!-- 进入按钮 -->
    <div id="button-container">
      <div id="button-enter" @click="goTo('me', '欢迎回来!')">立刻逛集市</div>
      <router-link to="/check_in" id="button-login">注册/登录</router-link>
    </div>

    <!-- 介绍 -->
    <div id="intro">
      <div class="intro-item">
        <text>🪙 白嫖小金库</text>
        <text>每天起床点一下签到——金币哗啦啦掉进兜里，白嫖的快乐就是这么朴实无华。</text>
      </div>

      <div class="intro-item">
        <text>🛋️ 躺赢打工人</text>
        <text>打开挂机打工，人和键盘一起躺平，金币却在后台疯狂仰卧起坐。</text>
      </div>

      <div class="intro-item">
        <text>💥 七日限时爆闪</text>
        <text>第七天深夜 23:59:59, 你的宝贝商品“砰”一声灰飞烟灭——连灰尘都不给数据库留。</text>
      </div>
    </div>

    <!-- 赞助 -->
    <a id="heart" href="http://localhost:8000/api/heart/">给作者买一杯可乐🥤</a>
  </main>
</template>

<script setup>
import { goTo } from '@/assets/js/tool';
import Typed from 'typed.js';
import { onMounted } from 'vue';
import { RouterLink } from 'vue-router';

onMounted(() => {
  new Typed('#typed-text', {
    strings: ['只活 168 小时的跳蚤宇宙🪐', '赶紧来玩😙'],
    typeSpeed: 100,
    loop: false,
    backSpeed: 50,
  })
})
</script>

<style src="./home.css" scoped></style>

